<template>
  <div>
    <div class="select-container" v-if="selectType === '1'" @mouseleave="isShow2=false" style="min-height: 100px;width: 354px;">
      <div class="select-container__input-box">
        <div>
          <input
            type="text" placeholder="回车搜索标签"
            @blur="isShow=false"
            @keyup.enter="handleSearch"
            @focus="handleShow"
            v-model="value.tag"
            ref="tag"
          >
          <transition name="fade">
            <div class="label-list__wrap" v-if="isShow || isShow2" @mouseleave="isShow2=false">
              <div class="label-list">
                <select-content
                  v-if="isSearch"
                  v-for="(item, index) in labelList"
                  :isHot="labelList[0].hasOwnProperty('tagType')"
                  :item="item"
                  :index="index"
                  :key="`${item}${index}`"
                  @select="handleChange"
                ></select-content>
                <p v-if="!isSearch" style="line-height: 100px; text-align: center;">
                  暂无搜索结果
                </p>
              </div>
            </div>
          </transition>
        </div>
        <button @click="createTag"> 创建标签 </button>
      </div>
      <div class="select-container__label-list">
        <label-wrap
          v-for="(item, index) in result"
          :info="item.tag"
          :index="index"
          :key="`${index}${item}`"
          @deletelabel="handleDelete"
        ></label-wrap>
      </div>
    </div>
    <div class="select-container" v-if="selectType === '2'" style="width: 196px;cursor: pointer;" @mouseleave="isShow=false">
      <div class="input-box" @click="handleShow">
        <input type="text" v-model="value.tag" :placeholder="placeholder" ref="select" style="cursor: pointer;">
        <div class="icon-box">
          <yun-icon name="down_arrow" size="10px" color="#999"></yun-icon>
        </div>
      </div>
      <div class="class-list-box" ref="tagsBox" v-show="isShow && isShow2" @mouseleave="isShow=false">
        <select-content
          v-for="(item, index) in classList"
          :item="item"
          :itemIndex="index"
          :key="`${item}${index}`"
          @scrollTop="handleScroll"
          @select="handleChange2"
        ></select-content>
      </div>
    </div>
  </div>
</template>

<script>
import SelectContent from "./selectContent.vue";
import LabelWrap from "./labelWrap";
import config from "../../../action/config";

export default {
  name: 'selectCard',
  components: {SelectContent, LabelWrap},
  props: {
    selectType: String,
    classList: Array,
    placeholder: String,
    childList:{
      type:Array,
      default:() => ([])
    }
  },
  data(){
    return{
      isShow: false,
      isShow2: false,
      list: [],
      searchList: [],
      result: [],
      value: {
        tagId: '',
        tag: ''
      },
      isSearch: true
    }
  },
  computed: {
    labelList: function () {
      if (this.searchList.length) {
        return this.searchList
      } else {
        return this.list
      }
    },
  },
  watch: {
    // value: {
    //   deep: true,
    //   handler: function (val) {
    //     this.searchList = [];
    //     this.list.forEach((item, index) => {
    //       if (item.indexOf(val) >= 0) {
    //         this.searchList.push(item)
    //       }
    //     });
    //   }
    // },
  },
  methods: {
    // 点击选中标签后 添加标签
    handleChange(tag, tagId){
      Object.assign(this.value, {tagId, tag});
      this.handleTags();
      this.isShow = false;
      this.isShow2 = false;
    },
    // 删除选中的标签
    handleDelete(index){
      this.result.splice(index, 1);
      this.$emit('handleTag', this.result);
    },
    // 回车后，进行搜索
    async handleSearch(){
      this.isShow = true;
      this.isShow2 = true;
      if (this.value.tag !== "") {
        let tagSearch = await this.$axios.$get(config.api.get.Tag.search, {
          params: {
            keywords: this.value.tag,
            page: 1,
            size: 12
          }
        });
        //console.log(tagSearch);
        this.isSearch = true; // 用于 有无搜索结果
        this.searchList = [];
        if (tagSearch.data.dataList.length !== 0) {
          tagSearch.data.dataList.forEach(item => {
            let tagId = item.tagId;
            let tag = item.tagName;
            this.searchList.push({tagId, tag})
          });
        } else {
          this.isSearch = false;
        }
      }
    },
    // 点击 标签 自动选择
    handleTags(){
      this.result.push(this.value);
      let map = new Map();
      for (let item of this.result) {
        if (!map.has(item.tag)) {
          map.set(item.tag, item)
        }
      }
      this.result = [...map.values()];
      this.isShow = false;
      this.value = {};
      this.$emit('handleTag', this.result);
    },
    handleChange2(tag, tagId){
      Object.assign(this.value, {tagId, tag});
      this.isShow =false;
      this.isShow2 = false;
      this.$emit('handleClass', this.value);
    },
    handleScroll(num,index){
      setTimeout(()=>{
        this.$refs.tagsBox.scrollTop = this.$refs.tagsBox.scrollTop+40*index
      })
    },

    createTag() {
      this.$popupbox({
        title: '创建标签',
        name: '',
        onSubmit: (value) => {
          this.$axios.$post(config.api.post.Tag.create, {
            tagName: value,
            tagType: 0
          }).then(res => {
            if (res.code === 0) {
              let obj = {
                tagId: res.data.tagId,
                tag: res.data.tagName
              };
              this.result.push(obj);
              this.$popupbox.close();
              this.$emit('handleTag', this.result);
              this.$message({
                type: 'success',
                message: '标签创建成功'
              })
            } else {
              this.$message({
                type: 'warning',
                message: res.msg
              })
            }
          })
        }
      })
    },
    handleShow(){
      this.isShow = true;
      this.isShow2 = true;
    }
  },
  created() {
    if (this.selectType === '1') {
      this.$axios.$get(config.api.get.Tag.hotTags, {
        params: {
          page: 1,
          size: 10
        }
      }).then(res => {
        let arr = res.data.dataList;
        arr.forEach(item => {
          this.list.push({
            tagId: item.tagId,
            tag: item.tagName,
            referenceCount: item.referenceCount,
            tagType: item.tagType
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  input {
    border: 1*$length solid transparent;
    @extend %animate-transition;
    &:focus {
      border: 1*$length solid #00AAE6;
    }
  }
.select-container{
  .select-container__input-box{
    @extend %flex-row-spb;
    > div {
      position: relative;
      > input {
        @include fontStyle(14,19,500,#666,left);
        width: 279*$length;
        height: 46*$length;
        padding: 14*$length 16*$length;
        box-sizing: border-box;
        background-color: #F4F8FA;
        @include border-radius(4*$length);
      }
      .label-list{
        position: absolute;
        top:56*$length;
        left: 2*$length;
        width: 275*$length;
        height: 122*$length;
        padding: 5*$length 0;
        z-index: 100;
        background-color: #fff;
        box-sizing: border-box;
        overflow-y: auto;
        overflow-x: hidden;
        @include box-shadow(0 6*$length 20*$length rgba(0,0,0,.1));
        @include border-radius(4*$length);
        &:before{
          position: absolute;
          display: inline-block;
          top: -16*$length;
          left: 25*$length;
          content: '';
          width: 0;
          height: 0;
          border: 8*$length solid;
          border-color: transparent transparent #fff;
        }
      }
    }
    > button {
      border: none;
      background-color: #fff;
      margin-left: 16*$length;
      @extend %animate-transition;
      @include fontStyle(14,19,500,#999,left);
      &:hover{
        @extend %cursorPointer;
        color: #00AAE6;
      }
    }
  }
  .select-container__label-list{
    margin-top: 12*$length;
    margin-left: 4*$length;
  }
  .input-box{
    position: relative;
    > input {
      @include fontStyle(14,19,500,#666,left);
      width: 196*$length;
      height: 46*$length;
      padding: 14*$length 16*$length;
      background-color: #F4F8FA;
      @include border-radius(4*$length);
    }
    .icon-box {
      position: absolute;
      top: 14*$length;
      right: 20*$length;
    }
  }
  .class-list-box{
    position: absolute;
    width: 196*$length;
    max-height: 250*$length;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 999;
    border: 1*$length solid #F4F8FA;
    @include border-radius(4*$length);
    @extend %animate-transition;
    background-color: #fff;
  }
}
</style>
